<template>
  <view class="bottom">
    <view class="voice" @click="playVoice">
      <image src="/static/images/Slice Copy 2@2x.png" class='icon_sound'></image>
    </view>
    <view class="voice_count">10</view>
  </view>
</template>

<script>

export default {
  props: ['src'],
  data(){
    return{
      canPlay: true
    }
  },
  mounted() {
    this.canPlay = true;
    const innerAudioContext = wx.createInnerAudioContext()
    this.innerAudioContext = innerAudioContext;
    innerAudioContext.src = this.src;
    innerAudioContext.onCanplay(() => {
      console.log('可以播放');
      this.canPlay = true
    })
    innerAudioContext.onPlay(()=>{
      console.log('开始播放')
    })
    innerAudioContext.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    })
  },
  methods:{
    playVoice:async function () {
      this.innerAudioContext.play()
    },
}}
</script>

<style>

.bottom {
    width: 100%;
    height: 80rpx;
  }
  .voice {
    background: #fff;
    border: 1rpx solid #999;
    border-radius: 4px;
    height: 60rpx;
    float: left;
    padding: 10rpx;
    box-sizing: border-box;
    margin-right: 20rpx;
    clear: both;
  }

  /*声音图片样式  */
  .icon_sound{
    width: 40rpx;
    height: 40rpx;
  }
  .icon_sound {
    margin-right: 8rpx;
  }

  /*时长样式  */
  .voice_count {
    height: 78rpx;
    font-size: 24rpx;
    color: #999;
    line-height: 60rpx;
    float: left;
  }

</style>
